<template>
  <div class="order-card">
    <div
      class="goods"
      @click="$commonJs.goPage('orderDetail', info.id)"
      v-for="(item, index) in info.product"
      :key="index"
    >
      <img :src="$api.imgUrl + JSON.parse(item.product_img)[0]" alt="" />
      <div class="detail">
        <span class="name">{{ item.product_name }}</span>
        <span class="brand">规格：{{ item.size }}</span>

        <span class="price"
          >￥<md-amount
            :value="parseFloat(item.product_price)"
            has-separator
          ></md-amount
        ></span>
      </div>
      <div class="price-box">
        <span class="count">x{{ item.num }}</span>
        <span class="status" v-show="info.product.length - 1 === index"
          ><span>{{
            changeStatus(info.order_status, info.pay_status, info.eval_state)
          }}</span></span
        >
      </div>
    </div>
    <div class="footer">
      共{{ info.product.length }}件商品 合计：<span class="price"
        >￥<md-amount :value="parseFloat(info.money)" has-separator></md-amount
      ></span>
    </div>
    <div class="btn-wrapper">
      <md-button
        style="margin-right: 24px"
        v-if="info.pay_status === 1 && info.order_status === 1"
        type="default"
        plain
        round
        inline
        @click="cancelOrder(info.id)"
        >取消订单</md-button
      >
      <md-button
        v-if="info.pay_status === 1 && info.order_status === 1"
        type="default"
        plain
        round
        inline
        @click="pay(info.order_num)"
        >去付款</md-button
      >
      <md-button
        v-if="
          (info.pay_status === 2 || info.pay_status === 5) &&
            info.order_status === 5
        "
        type="default"
        plain
        round
        inline
        @click="confirmOrder(info.id)"
        >确认收货</md-button
      >
      <md-button
        v-if="info.eval_state === 0 && info.order_status === 2"
        type="default"
        plain
        round
        inline
        @click="$commonJs.goPage('addComment', info.id)"
        >去评价</md-button
      >
      <md-button
        v-if="
          info.order_status === 3 ||
            (info.eval_state === 1 && info.order_status === 2)
        "
        type="default"
        plain
        round
        inline
        @click="delOrder(info.id)"
        >删除订单</md-button
      >
    </div>
  </div>
</template>

<script>
import { Dialog, Amount, Button } from "mand-mobile";
export default {
  name: "card",
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Amount.name]: Amount
  },
  props: {
    info: {
      type: Object
    }
  },
  methods: {
    // payStatus1为等待支付；2为支付成功；3为支付失败; 4线下付款；5线下付款已收款；6线下付款拒绝；7为待审核
    // order_status:1待发货；2已完成；3取消；4已结算；5已发货；
    // 评价状态 0未评价，1已评价，2已过期未评价
    changeStatus(status, payStatus, eval_state) {
      if (payStatus === 1 && status === 1) {
        return "待付款";
      } else if ((payStatus === 2 || payStatus === 5) && status === 1) {
        return "待发货";
      } else if ((payStatus === 2 || payStatus === 5) && status === 5) {
        return "待收货";
      } else if (status === 3) {
        return "已取消";
      } else if (eval_state === 0) {
        return "待评价";
      } else if (eval_state === 1) {
        return "交易成功";
      }
    },
    cancelOrder(id) {
      this.$ajax
        .post(
          this.$api.cancelOrder,
          {
            order_id: id
          },
          false
        )
        .then(() => {
          this.$emit("refresh");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    pay(orderNum) {
      this.$ajax
        .post(
          this.$api.goPay,
          {
            order_num: orderNum
          },
          false
        )
        .then(() => {
          let obj = {
            order_num: orderNum
          };
          this.$store.dispatch("changeOrder", obj);
          this.$commonJs.goPage("shoppingPayMethod");
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    confirmOrder(id) {
      Dialog.confirm({
        title: "确认收货",
        content: "请确认是否已收到商品",
        confirmText: "确定",
        onConfirm: () => {
          this.$ajax
            .post(
              this.$api.confirmOrder,
              {
                order_id: id
              },
              false
            )
            .then(() => {
              this.$toast.succeed("确认收货成功");
              this.$emit("refresh");
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    },
    delOrder(id) {
      Dialog.confirm({
        title: "删除订单",
        content: "请确认是否进行操作",
        confirmText: "确定",
        onConfirm: () => {
          this.$ajax
            .post(
              this.$api.deleteOrder,
              {
                order_id: id
              },
              false
            )
            .then(() => {
              this.$toast.succeed("删除订单成功");
              this.$emit("refresh");
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  }
};
</script>

<style scoped lang="stylus">
.order-card{
  padding  24px 11px
  background white
  margin 24px 24px 26px 24px
  border-radius 15px
}
.goods{
  flex_content();
  font-size 18px;
  line-height 50px
  padding-bottom 24px
  img{
    width 174px
    height 174px
    margin-right 23px
  }
  .detail{
    flex_one();
    flex_content();
    flex_column();
    flex_justify_space()
    .price{
      font-size:26px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .name{
      font-size:26px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(0,0,0,1);
    }
    .brand{
      font-size:26px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
  }
  .price-box{
    width 138px
    height 174px
    text-align right
    flex_content();
    flex_column();
    flex_justify_space()
    .count{
      font-size:26px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .status{
      font-size:20px;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color #ED7218
      span{
        display inline-block
        padding  0 24px
        border 1px solid #ED7218
      }
    }
  }
}
  .footer{
    font-size:24px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height:43px;
    text-align right
    .price{
      color #ED7218
    }
  }
  .btn-wrapper{
    text-align right
  }
</style>
